<template>
	<view>
		<view class="zhanwei"></view>
		<view class="tap flex">
			<view :class="['tap_item',tap_index == 1?'tap_item_active':'']" @click="tap_click(1)">
				<view :class="['tap_item_top flex1',tap_index == 1?'tap_item_top_active':''] ">
					<u-icon name="plus" :color="tap_index == 1?'#fff':'#999'" size="13"></u-icon>
					<view style="margin-left: 10rpx;">
						报销
					</view>
				</view>
				<view :class="['tap_item_bottom',tap_index == 1?'tap_item_bottom_active':'']">
					电子票据上传
				</view>
			</view>
			<view :class="['tap_item',tap_index == 2?'tap_item_active':'']" @click="tap_click(2)">
				<view :class="['tap_item_top',tap_index == 2?'tap_item_top_active':'']">
					报销信息
				</view>
				<view :class="['tap_item_bottom',tap_index == 2?'tap_item_bottom_active':'']">
					报销基础信息编辑
				</view>
			</view>
		</view>
		<view class="tabs flex1">
			<view :class="['tabs_item',tabs_index==index?'tabs_item_active':'']" v-for="(item,index) in tabs_ist" @click="choose_tabs(index)">
				{{item}}
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll" @scrolltolower="scrolltolower" :style="{height:scrollH+'px'}">
			<view class="list">
				<view class="list_item flex" v-for="(item,index) in list">
					<view class="list_item_left">
						<view class="list_item_left_top">
							{{item.created_at}}
						</view>
						<view class="list_item_left_min" style="margin: 5rpx 0;">
							报销单
						</view>
						<view class="list_item_left_bottom">
							{{item.name}} <text style="margin-left: 10rpx;">{{item.event}}报销</text>
						</view>
					</view>
					<view class="list_item_right">
						<view :class="['list_item_right_top',tabs_index==1?'list_index_1':tabs_index==2?'list_index_2':'']">
							{{tabs_index==0?'审核中':tabs_index==1?'已关闭':'已付款'}}
						</view>
						<view class="list_item_right_bottom">
							{{item.amount}}
						</view>
						
					</view>
					<view class="list_item_right_min" v-if="tabs_index==2" @click="chakan(item.img)">
						查看付款凭证
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	import getScrollHeight from "@/utils/utils.js"
	import {expense} from "@/api/common.js"
	export default {
		data() {
			return {
				tap_index:1,
				tabs_ist:['审核中','已关闭','已付款'],
				tabs_index:0,
				scrollH:'',
				page:1,
				list:[],
				last_page:'',
			}
		},
		onReady() {
			let t = this
			getScrollHeight.getScrollHeight('scroll').then(res=>{
				t.scrollH = res - 10
			})	
		},
		onLoad() {
			this.getlist()
		},
		methods: {
			getlist(){
				let t = this
				expense({
					status:t.tabs_index==0?'2':t.tabs_index==1?'3':'4',
					page:t.page
				}).then(res=>{
					console.log(res)
					if(res.code == 200001){
						t.last_page = res.data.last_page
						t.list = [...t.list,...res.data.data]
					}
				})
			},
			scrolltolower(e){
				if(this.page < this.last_page){
					this.page++;
					this.getlist()
				}
			},
			tap_click(num){
				this.tap_index = num
				if(num == 2){
					uni.navigateTo({
						url:'/pages/UploadElectronicBills/bxmessg/bxmessg'
					})
				}
				if(num == 1){
					uni.navigateTo({
						url:'/pages/UploadElectronicBills/baoxiao/baoxiao'
					})
				}
			},
			choose_tabs(index){
				this.tabs_index = index
				this.page = 1
				this.list = []
				this.getlist()
			},
			chakan(img){
				let url = this.$ImgUrl+img
				uni.previewImage({
					urls:[url],
					current:url,
					success(res){
						console.log(res)
					}
					
				})
			}
			
		}
	}
</script>

<style>
.zhanwei{
	width: 100%;
	height: 20rpx;
	background: #F4F4F4;
}
.tap{
	width: 100%;
	/* height: 180rpx; */
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	background: #fff;
}
.tap_item{
	width: 330rpx;
	height: 140rpx;
	border-radius: 12rpx;
	border: 2rpx solid #CCC;
	padding-top: 30rpx;
	box-sizing: border-box;
}
.tap_item_top{
	color: #333;
	text-align: center;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 32rpx;
	font-weight: 700;
	justify-content: center;
}
.tap_item_bottom{
	color: #999;
	text-align: center;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 24rpx;
	font-weight: 400;
	margin-top: 4rpx;
}
.tap_item_active{
	background:#0165FB;
}
.tap_item_top_active{
	color: #FFF;
}
.tap_item_bottom_active{
	color: rgba(255, 255, 255, 0.80);
}
.tabs{
	width: 100%;
	height: 104rpx;
	background: #F4F4F4;
}
.tabs_item{
	width: 160rpx;
	height:104rpx;
	line-height: 104rpx;
	text-align: center;
	color: #696969;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 30rpx;
	font-weight: 400;
}
.tabs_item_active{
	color: #333;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 34rpx;
	font-weight: 700;
	border-bottom: 4rpx solid #0165FB;
}
.list_item{
	padding: 30rpx;
	box-sizing: border-box;
	border-bottom: 2rpx solid #F4F4F4;;
}
.list_item_left_top{
	color: #999;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 24rpx;
	font-weight: 400;
}
.list_item_left_min{
	color: #333;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 34rpx;
	font-weight: 700;
}
.list_item_left_bottom{
	color: #999;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 24rpx;
	font-weight: 400;
}
.list_item_right_top{
	color: #E5AC1A;
	text-align: right;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 28rpx;
	font-weight: 400;
}
.list_index_1{
	color: #999;
}
.list_index_2{
	color: #0165FB;
}
.list_item_right_bottom{
	color: #333;
	text-align: right;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 38rpx;
	font-weight: 700;
	margin-top: 20rpx;
}
.list_item_right_min{
	width: 100rpx;
	color: #0165FB;
	text-align: right;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 28rpx;
	font-weight: 400;
}
</style>
